
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        img {
            position: fixed;
            left: 600px;
            top: 400px;
        }
    </style>
</head>


<body background="img/grassland.png">
    <img src="img/down.png" alt="">
    <script>

        // 获取图片
        var Oimg = document.querySelector('img')
        // 获取图片的属性
        var style = getComputedStyle(Oimg)
        // 记录图片的初始位置
        var L = parseInt(style.left)
        var T = parseInt(style.top)
        // 绑定键盘按下事件
        window.onkeydown = function(e) {
            console.log(e.key);
            // 判断方向键
            switch(e.key) {
                // 按下上方向键
                case 'ArrowUp':
                    // 改变图片的src地址，控制转向
                    Oimg.src = 'img/up.png'
                    // 目标位置 = 初始位置 - 每次移动距离（这里设为10px）
                    T = T - 10
                    // 改变图片的top距离，控制移动
                    Oimg.style.top = T + 'px'
					if(T <= 0) {
					    alert("您已经到最上边了！");
					   }
                    break;
					
                case 'ArrowDown':
                    Oimg.src = 'img/down.png'
                    T = T + 10
                    Oimg.style.top = T + 'px'
					if(T>= 600) {
					    alert("您已经到最下边了！");
					   }
                    break;
					
                case 'ArrowLeft':
                    Oimg.src = 'img/left.png'
                    L = L - 10
                    Oimg.style.left = L + 'px'
					if(L <= 0) {
					    alert("您已经到最左边了！");
					   }
                    break;
					
                case 'ArrowRight':
                    Oimg.src = 'img/right.png'
                    L = L + 10
                    Oimg.style.left = L + 'px'
					if(L >= 1200) {
					    alert("您已经到最右边了！");
					   }
                    break;
            }
        }
    </script>
</body>
 
</html>